<!--
 * @Author: wushuiqing
 * @Email: wsqsix@163.com
 * @Date: 2021-12-28 12:57:22
-->

<template>
  <div class="infoList">
    <!-- 头部 -->
    <div class="header">
      <el-button type="primary" @click="toPubArticleClick">发布文章</el-button>
      <el-input
        placeholder="请输入内容"
        v-model="inputMsg"
        style="width: 300px"
        clearable
      >
      </el-input>
      <el-button plain icon="el-icon-search" @click="searchClick"
        >搜索</el-button
      >
    </div>

    <!-- 列表展示 -->
    <div class="list">
      <el-table :data="listData.list" style="width: 100%" @row-click="toDetail">
        <!-- 封面 -->
        <el-table-column label="封面" width="180" align="center">
          <template slot-scope="scope">
            <el-image
              style="height: 100px; width: 100%"
              :src="scope.row.cover"
              :preview-src-list="[scope.row.cover]"
            >
            </el-image>
          </template>
        </el-table-column>

        <!-- 标题 -->
        <el-table-column label="标题" align="center">
          <template slot-scope="scope">
            <h3>{{ scope.row.title }}</h3>
            <div>{{scope.row.category.name}}</div>
            <div>{{ scope.row.baseUser.realname }}</div>
            {{ moment(scope.row.publishTime).format("YYYY-MM-DD") }}
          </template>
        </el-table-column>

        <!-- 状态 -->
        <el-table-column label="状态" width="150" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === '审核通过'" type="success">{{
              scope.row.status
            }}</el-tag>
            <el-tag
              v-else-if="scope.row.status === '审核不通过'"
              type="danger"
              >{{ scope.row.status }}</el-tag
            >
            <el-tag v-else-if="scope.row.status === '推荐'" type="warning">{{
              scope.row.status
            }}</el-tag>
            <el-tag v-else type="info">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>

        <!-- 阅读次数 -->
        <el-table-column
          prop="readTimes"
          label="阅读次数"
          width="100"
          align="center"
        >
        </el-table-column>

        <!-- 操作 -->
        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-popover placement="top" width="200">
              <div style="text-align: right; margin: 0">
                <div v-if="scope.row.status == '未审核'">
                  <el-button
                    size="mini"
                    type="text"
                    @click.stop="pastClick(scope.row.id)"
                    >审核通过</el-button
                  >
                  <el-button size="mini" @click.stop="failClick(scope.row.id)"
                    >审核不通过</el-button
                  >
                </div>
                <div v-else-if="scope.row.status == '审核通过'" style="text-align: center">
                  <el-button size="mini" @click.stop="failClick(scope.row.id)"
                    >审核不通过</el-button
                  >
                </div>
                <div v-else style="text-align: center">
                  <el-button
                    size="mini"
                    type="text"
                    @click.stop="pastClick(scope.row.id)"
                    >审核通过</el-button
                  >
                </div>
              </div>

              <el-button @click.stop="" size="small" slot="reference"
                >审核</el-button
              >
            </el-popover>

            <el-button
              type="text"
              size="small"
              @click.stop="toUpdateArticle(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              @click.stop="delArticleClick(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页区域 -->
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="listData.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
import { mapState, mapActions } from "vuex";
let moment = require("moment");
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      inputMsg: "",
      page: 1,
      pageSize: 5,
    };
  },
  // 计算属性
  computed: {
    ...mapState("list", ["listData"]),
  },

  watch: {},

  methods: {
    moment,
    ...mapActions("list", ["getListDataVuex"]),
    toPubArticleClick() {
      this.$router.push({
        path: "/info/Publish",
      });
    },
    searchClick() {
      this.getListDataVuex({
        page: 1,
        pageSize: 100,
        title: this.inputMsg,
      });
    },
    handleCurrentChange(currentPage) {
      // console.log(currentPage);
      // 获取当前用户点击的页码 更新this.page
      this.page = currentPage;
      // 再调用获取全部产品数据的方法
      this.getListDataVuex({
        page: this.page,
        pageSize: this.pageSize,
      });
    },
    pastClick(id) {
      post("/article/check", { id: id, status: "审核通过" }).then((res) => {
        if (res.message == "审核成功") {
          this.$message({
            message: "审核成功",
            type: "success",
          });

          this.getListDataVuex({
            page: this.page,
            pageSize: this.pageSize,
          });
        } else {
          this.$message({
            type: "error",
          });
        }
      });
    },
    failClick(id) {
      post("/article/check", { id: id, status: "审核不通过" }).then((res) => {
        if (res.message == "审核成功") {
          this.$message({
            message: res.message,
            type: "success",
          });

          this.getListDataVuex({
            page: this.page,
            pageSize: this.pageSize,
          });
        } else {
          this.$message({
            type: "error",
          });
        }
      });
    },
    toUpdateArticle(row) {
      this.$router.push({
        path: "/info/Publish",
        query: row,
      });
    },
    delArticleClick(id) {
      this.$confirm("此操作将永久删除该文章, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          get("/article/deleteById", { id: id }).then((res) => {
            if (res.message == "删除成功") {
              this.$message({
                message: res.message,
                type: "success",
              });

              this.getListDataVuex({
                page: this.page,
                pageSize: this.pageSize,
              });
            } else {
              this.$message({
                type: "error",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    toDetail(row) {
      let temp = {
        ...row,
      };
      let temp1 = {
        ...row.baseUser,
      };
      // console.log(temp);
      // console.log(temp1);
      let temp2 = Object.assign(temp, temp1);
      let temp3 = {
        ...temp2,
      };
      // console.log(temp3);
      this.$router.push({
        path: "/info/Details",
        query: temp3,
      });
    },
  },
  created() {
    this.getListDataVuex({
      page: this.page,
      pageSize: this.pageSize,
    });
  },

  mounted() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>

<style scoped>
.infoList {
  min-height: calc(100vh - 100px);
}

.list {
  margin-top: 10px;
  max-height: 500px;
  overflow: auto;
}

.pagination {
  position: fixed;
  right: 10px;
  bottom: 50px;
}
</style>
